<template>
    <div class="content">
        <p class="title">水印设置</p>
      <div class="box">
        <div class="left">

          <el-input
            class="watermark_textarea"
            style="margin-bottom: 20px;background-color:#F3F3F3 "
            v-model="form.text"
            type="textarea"
            :rows="3"
            maxlength="15"
            show-word-limit></el-input>
          <div class="item">
            <span class="label">水印字号</span>
            <el-select v-model="form.size" placeholder="请选择" size="medium" style="width: 238px">
              <el-option
                v-for="item in sizeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>

          <div class="item">
            <span class="label">水印字体</span>
            <el-select v-model="form.font" placeholder="请选择" size="medium" style="width: 238px">
              <el-option
                v-for="item in fontOptions"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </div>

          <div class="item" style="display: flex;align-items: center">
            <span class="label">水印颜色</span>
            <el-color-picker v-model="form.fontColor"></el-color-picker>
          </div>

          <div class="item" style="display: flex;align-items: center">
            <span class="label" style=" flex: 0 0 55px !important;">不透明度</span>
            <el-slider
              style="width: 238px;display: inline-block"
              :format-tooltip="formatTooltip"
              v-model="form.transparent">
            </el-slider>
          </div>

          <div class="item" style="display: flex;align-items: unset">
            <span class="label" style=" flex: 0 0 55px !important;">对齐</span>
            <div style="width: 120px">
              <img :src="imgInfo.top_left" class="align_img" @click="active('top_left')"/>
              <img :src="imgInfo.top_center" class="align_img" @click="active('top_center')"/>
              <img :src="imgInfo.top_right" class="align_img" @click="active('top_right')"/>
              <img :src="imgInfo.left_center" class="align_img" @click="active('left_center')"/>
              <img :src="imgInfo.center" class="align_img" @click="active('center')"/>
              <img :src="imgInfo.right_center" class="align_img" @click="active('right_center')"/>
              <img :src="imgInfo.bottom_left" class="align_img" @click="active('bottom_left')"/>
              <img :src="imgInfo.bottom_center" class="align_img" @click="active('bottom_center')"/>
              <img :src="imgInfo.bottom_right" class="align_img" @click="active('bottom_right')"/>
            </div>
          </div>
        </div>

        <div class="right">
          <div>
            <img :src="src" class="view"/>
            <div style="text-align: right;padding-top: 10px">
              <el-button type="primary" plain size="medium" @click="cancel">取 消</el-button>
              <el-button type="primary" size="medium" style="margin-left: 50px" @click="save()">保 存</el-button>
            </div>
          </div>

        </div>
      </div>

    </div>
</template>

<script>
  import {drawWaterMark} from '@/util/drawWaterMark'
  import {saveMark, markDetail} from '@/api/system/waterMark'
    export default {
        name: "watermark",
        data() {
            return {
                src: './img/watermark/bg.png',
                imgInfo:{
                  top_left:'./img/watermark/top_left.png',
                  top_center:'./img/watermark/top_center.png',
                  top_right:'./img/watermark/top_right.png',
                  left_center:'./img/watermark/left_center.png',
                  center:'./img/watermark/center.png',
                  right_center:'./img/watermark/right_center.png',
                  bottom_left:'./img/watermark/bottom_left.png',
                  bottom_center:'./img/watermark/bottom_center.png',
                  bottom_right:'./img/watermark/bottom_right.png'
                },
                sizeOptions:[
                    {
                    value:16,
                    label:'16px'
                    },
                    {
                        value:18,
                        label:'18px'
                    },{
                        value:20,
                        label:'20px'
                    },
                    {
                        value:22,
                        label:'22px'
                    },
                    {
                        value:24,
                        label:'24px'
                    },
                    {
                        value:26,
                        label:'26px'
                    }
                ],
                fontOptions:['微软雅黑','宋体', '黑体', 'Arial'],
                form:{
                    text:'直路外贸管理云平台',
                    size:20,
                    font:'微软雅黑',
                    fontColor:'#000000',
                    transparent:100,
                },
                showType:false,
                checked:false,
                activeSeat:'bottom_right'

            }
        },
        mounted() {
            this.getdetail()
            this.imgInfo.bottom_right = './img/watermark/bottom_right_active.png';
        },
        methods:{
            getdetail() {
                markDetail().then(res => {
                    let data = res.data.data;
                    this.form.text = data.text;
                    this.form.size = data.fontSize;
                    this.form.font = data.font;
                    this.form.fontColor = data.color
                    this.form.transparent = data.shadow * 100;
                    this.activeSeat = data.textAlign;
                    this.init()
                })
            },
            init() {
                drawWaterMark('./img/watermark/bg.png', this.form, this.activeSeat).then(res => {
                    this.src = res
                })
            },
            active(seat) {
              this.activeSeat = seat
            },
            formatTooltip(value) {
                return Math.round(value) + '%'
            },
            save() { // 保存水印
                saveMark(Object.assign(this.form,{'activeSeat':this.activeSeat})).then(res => {
                    if(res.data.success) {
                        this.$message({
                            message:res.data.msg,
                            type:'success'
                        })
                    }
                })
            },
            cancel() {
                this.getdetail()
            }
        },
        watch:{
            form: {
                handler: function () {
                    this.init()
                },
                deep: true
            },
            activeSeat(value) {
                this.imgInfo.top_left = './img/watermark/top_left.png';
                this.imgInfo.top_center = './img/watermark/top_center.png';
                this.imgInfo.top_right = './img/watermark/top_right.png';
                this.imgInfo.left_center = './img/watermark/left_center.png';
                this.imgInfo.center = './img/watermark/center.png';
                this.imgInfo.right_center = './img/watermark/right_center.png';
                this.imgInfo.bottom_left = './img/watermark/bottom_left.png';
                this.imgInfo.bottom_center = './img/watermark/bottom_center.png';
                this.imgInfo.bottom_right = './img/watermark/bottom_right.png';

                this.imgInfo[value] = `./img/watermark/${value}_active.png`

                this.init()
            }
        }
    }
</script>
<style lang="scss">
  .watermark_textarea{
    .el-textarea__inner{
      background-color: #F3F3F3;
    }
    .el-input__count{
      background-color: #F3F3F3;
    }
  }
</style>

<style scoped>
  .content{
    padding: 25px;
  }
  .left{
    width: 300px;
    margin-top: 20px;
    float: left;
  }
  .title{
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
  }
  .label{
    font-size: 13px;
    margin-right: 10px;
  }
  .item{
    margin-bottom: 20px;
  }
  .right{
    float: left;
    padding-left: 100px;
    padding-top: 15px;
  }
  .box{
    overflow: hidden;
  }
  .view{
    width: 450px;
    height: 450px;
  }

  .btns{
    width: 145px;
    display: block;
    height: 35px;
    line-height: 30px;
    text-align: center;
    border-right: 1px solid #2A97F9;
    box-sizing: border-box;
    float:left;
    cursor: pointer;
    background-color: white;
    color: #2A97F9;
    font-size: 13px;
  }
  .btns:hover{
    background-color: #2A97F9;
    color: white;
  }
  .btn_box{
    border: 1px solid #2A97F9;
    border-right: none;
    height:32px;
    width: 291px;
    box-sizing: border-box;
    border-radius: 5px;
    overflow:hidden;
    margin-bottom: 10px;
  }
  .icon_active{
    background-color: #2A97F9;
    color: white;
  }
  .align_img{
    width: 40px;
    height: 40px;
    cursor: pointer;
  }

</style>
